<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="400" height="400" viewBox="0 0 100 100" >
      <defs>
        <filter id="f1">
          <feGaussianBlur stdDeviation="0">
            <animate attributeType="XML"
              attributeName="stdDeviation"
              to="3"
              dur="2s"
              begin="img1.click"
              fill="freeze"/>
          </feGaussianBlur>
        </filter>
      </defs>

      <image id="img1" href="../imgs/5.png" x="0" y="0" height="100" width="100" filter="url(#f1)"/>
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100" >
      <defs>
        <filter id="f2">
          <feColorMatrix in="SourceGraphic"
            type="matrix"
            values="
              1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 1 0
            ">
              <animate attributeType="XML"
                attributeName="values"
                to="
                  -1 3 -1 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 1 0
                "
                dur="2s"
                begin="img2.click"
                fill="freeze"/>
              </feColorMatrix>
        </filter>
      </defs>

      <image id="img2" href="../imgs/6.png" x="0" y="0" height="100" width="100" filter="url(#f2)"/>
    </svg>
    
    <svg width="400" height="400" viewBox="0 0 100 100" >
      <defs>
        <filter id="f3">
          <feTurbulence baseFrequency="0.25" numOctaves="2" seed="50" result="img1" />
          <feDisplacementMap in="SourceGraphic" in2="img2" xChannelSelector="R" yChannelSelector="G" scale="0">
              <animate attributeType="XML"
                attributeName="scale"
                from="0" to="5"
                dur="2s"
                begin="t3.mouseover"
                fill="freeze"/>
          </feDisplacementMap>
        </filter>
      </defs>

      <text id="t3" x="50"  y="60" font-size="20" text-anchor="middle" filter="url(#f3)">dmc good</text>
    </svg>

    <svg width="400" height="400" viewBox="0 0 120 100" >
      <defs>
        <filter id="f4" x="0" y=".52" width="1" height=".48">
          <feTurbulence baseFrequency="0.05 0.5" result="img1">
            <animate id="a41" attributeType="XML"
              attributeName="baseFrequency"
              from="0.05 0.5"  to="0.025 0.5"
              dur="10s"
              begin="0s;a42.end"
              fill="freeze"/>
            <animate id="a42" attributeType="XML"
              attributeName="baseFrequency"
              from="0.025 0.5" to="0.05 0.5"
              dur="10s"
              begin="a41.end"
              fill="freeze"/>
          </feTurbulence>
          <feDisplacementMap in="SourceGraphic" in2="img1" xChannelSelector="R" yChannelSelector="G" scale="5"></feDisplacementMap>
        </filter>
      </defs>

      <image xlink:href="../imgs/8.png" x="0" y="0"  width="120" height="100" preserveAspectRatio="xMidYMid slice" />
      <image xlink:href="../imgs/8.png" x="0" y="0"  width="120" height="100" preserveAspectRatio="xMidYMid slice" filter="url(#f4)" />
    </svg>
    

    <svg width="480" height="400" viewBox="0 0 120 100" >
      <defs>
        <radialGradient id="g5"  cx="30" cy="20" fr="5" r="10" spreadMethod="reflect" gradientUnits="userSpaceOnUse">
           <stop offset="0" stop-color="#fb0" stop-opacity="1"/>
           <stop offset="1" stop-color="#0b0" stop-opacity="1"/>
        </radialGradient>

        <filter id="f5">
          <feImage xlink:href="../imgs/8.png" x="0" y="0" width="120" height="100" preserveAspectRatio="xMidYMid slice" result="img1"/>
          <feDisplacementMap in="img1" in2="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="0" result="img2">
            <animate attributeType="XML"
              attributeName="scale"
              from="15" to="0"
              dur="1s"
              begin="r5.click"
              restart="whenNotActive"
              fill="freeze"/>
          </feDisplacementMap>
          <feComposite in="img2" in2="SourceGraphic" operator="in"/>
        </filter>
      </defs>

      <image  xlink:href="../imgs/8.png" x="0" y="0" width="120" height="100" preserveAspectRatio="xMidYMid slice"/>
      <ellipse id="e5" cx="30" cy="20" rx="15" ry="10" fill="url(#g5)" filter="url(#f5)"  >
        <animate attributeType="XML"
          attributeName="rx"
          from="15" to="60"
          dur="1s"
          begin="r5.click"
          restart="whenNotActive"
          fill="freeze"/>
        <animate attributeType="XML"
          attributeName="ry"
          from="10" to="40"
          dur="1s"
          begin="r5.click"
          restart="whenNotActive"
          fill="freeze"/>
      </ellipse>
      <rect id="r5" x="0" y="0" width="120" height="100" fill-opacity="0"/>
    </svg>

   
    <script>
      const r5 = document.querySelector("#r5");
      const e5 = document.querySelector('#e5');
      const g5 = document.querySelector('#g5') ;

      function setCoord(){
        r5.onclick = function(){
          //现在开始了动画
          r5.onmousemove = null ;
          r5.onclick = null ;
          setTimeout(() => {
            setCoord();
          }, 1000);
        }

        r5.onmousemove = function(e){
            e5.setAttribute('cx',e.offsetX/4);
            e5.setAttribute('cy',e.offsetY/4);
            g5.setAttribute('cx',e.offsetX/4);
            g5.setAttribute('cy',e.offsetY/4);
            
        }
      }
      setCoord();
     

    </script>
    <!-- <script src="index.js"></script> -->
  </body>
</html>
